<template id="signed">
    <div class="signed">

        <div class="row signedList">
          <div class="signedListInfo">
            <span class="col_333 ListInfoL">缴费编号</span>
            <span class="ListInfoR selBox">
              <select v-model="seleInit" class="selStyle">
                <option  :value="sel.rownum" v-for="sel in signedArr">{{sel.feeId}}</option>
              </select>
            </span>
          </div>
        </div>
        <div v-for="item in signedArr" v-if="item.rownum == seleInit">
          <div class="row signedList">
            <div class="signedListInfo">
              <span class="col_333 ListInfoL">缴费人员</span>
              <span class="ListInfoR">{{item.feeUser.feeUserName}}</span>
            </div>
          </div>
          <div class="row signedList">
            <div class="signedListInfo">
              <span class="col_333 ListInfoL">缴费单位</span>
              <span class="ListInfoR">{{item.cropName}}</span>
            </div>
          </div>
          <div class="row signedList">
            <div class="signedListInfo">
              <span class="col_333 ListInfoL">联系方式</span>
              <span class="ListInfoR">{{item.feeUser.telNo}}</span>
            </div>
          </div>

          <div>
            <div v-if="item.feeUser.mDept.length">
              <div class="row signedList" v-for="(i, index) in item.feeUser.mDept" :key="i.deptId">
                <div class="signedListInfo">
                  <span class="col_333 ListInfoL">{{ index+1 | numToHan}}级机构</span>
                  <span class="ListInfoR">{{i.deptName}}</span>
                </div>
              </div>
            </div>
            <div v-else>
              <div class="row signedList">
                <div class="signedListInfo">
                  <span class="col_333 ListInfoL">一级机构</span>
                  <span class="ListInfoR">{{item.feeUser.deptName}}</span>
                </div>
              </div>
            </div>
          </div>

          <input type="button" @click="signedBtn(item)" value="解约" class="signedBtn" style="background: #ff4444" v-if="item.feeUser.status ==1">
          <input type="button" value="正在审核" class="signedBtn" v-else="">

        </div>

    </div>
</template>

<script>
  import Vue from 'vue'

  import comJs from '../../js/common'
  import { MessageBox } from 'mint-ui';

  Vue.filter( 'numToHan' , function(value) {
    return comJs.convertToChinese(value) ;
  });

    export default {
        data(){
            return {
              id: '',
              signedArr: [],
              seleInit: 1,     //默认情况选中第一个
              seleObj: {}
            }
        },
        methods: {

          //是否解约
          signedBtn: function (item) {
            var that = this;
            MessageBox.confirm('确定执行此操作?').then(function () {

              var params = {
                corpId: that.$route.query.id,
                feeId: item.feeId,
                status: item.status,
                openAccount: sessionStorage.getItem('userId')
              };
              that.$post(that.$urlAll.cancel_contract, params).then(function (response) {

                let instance = that.$toast('解约成功');
                setTimeout(function () {
                  instance.close();
                  that.$router.push({path:'/pay/paySign'})
                }, 2000)
              })
            }, function () {
              console.log('取消了');
            });
          }
        },

        created: function(){
          var that = this;
          this.$post(this.$urlAll.sign_project_detail, {corpId: this.$route.query.id, openAccount: sessionStorage.getItem('userId')}).then(function (response) {
            that.signedArr = response.t.mFeeUsers;
            that.seleObj = that.signedArr[0]
          })
        }
    }
</script>

<style scoped>
  @import "../../style/common.css";

  select{
    direction: rtl;
  }
  .signedList{
    height: 0.44rem;
    background-color: #fff;
    padding-left: 0.1rem;
  }
  .signedListInfo{
    border-bottom: 1px solid #eee;
    width: 100%;
    position: relative;
  }
  .signedList span{
    line-height: 0.44rem;
    font-size: 0.14rem;
  }
  .ListInfoR{
    padding-right: 0.1rem;
    font-size: 0.13rem;
    color: #666;
    position: absolute;
    right: 0px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);

  }
.signedBtn{
  width: 2.93rem;
  height: 0.44rem;
  border: none;
  background-color: #999;
  font-size: 0.16rem;
  color: #fff;
  -webkit-border-radius: 0.05rem;
  -moz-border-radius: 0.05rem;
  border-radius: 0.05rem;
  outline: none;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  margin-top: 0.6rem;
}



  .selStyle{
    border: none;
    outline: none;
    appearance:none;
    -moz-appearance:none;
    -webkit-appearance:none;
    height: 100%;
    background-color: transparent;
    padding-right: 20px;
    width: auto;
  }

  .selBox:before{
    content: '\e6d0';
    font-family:"iconfont" !important;
    position: absolute;
    right: 10px;
    font-size: 28px;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    z-index: -10;
    height: 100%;

  }
</style>
